<div>

    <form wire:submit="save">
        <div class="space-y-12">
            <div class="border-b border-gray-900/10 pb-12">

                <div class="mt-10 grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
                    <div class="sm:col-span-4">
                        <label for="username" class="block text-sm font-medium leading-6 text-gray-900">Domain
                            name</label>
                        <div class="mt-2">
                            <div
                                class="flex rounded-md shadow-sm ring-1 ring-inset ring-gray-300 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-600 sm:max-w-md">
                                <input type="text" name="domainname" id="domainname" autocomplete="domainname"
                                       class="block flex-1 border-0 bg-transparent py-1.5 pl-1 text-gray-900 placeholder:text-gray-400 focus:ring-0 sm:text-sm sm:leading-6"
                                       placeholder="domainname" wire:model="domainname">
                                <div>@error('domainname') {{ $message }} @enderror</div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <button type="submit">Add</button>
    </form>

    <ul role="list" class="divide-y divide-gray-100">
        @foreach($domains as $domain)

            <li class="flex justify-between gap-x-6 py-5" wire:key="{{ $domain->id }}">

                <div class="min-w-0 flex-auto">
                    <p class="text-sm font-semibold leading-6 text-gray-900">{{ $domain->domain }}</p>
                </div>

                <div class="hidden shrink-0 sm:flex sm:flex-col sm:items-end">
                    <button wire:click="delete({{$domain->id}})" type="button"
                            class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">
                        Delete
                    </button>
                </div>
            </li>

        @endforeach
    </ul>
</div>
